
<template>
  <div id="main">
    <el-select class="ks-select" @change="addEventChang" v-model="platform" required placeholder="请选择平台">
      <el-option
          v-for="item in platformList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
    <el-button @click="drawer = true" type="text" style="margin-left: 16px;">
      筛选维度
      <i class="el-icon-plus"></i>
    </el-button>
    <el-drawer
        title="筛选维度"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose"
        style="margin-top:60px;"
    >
      <div class="drawerCon">
        维度
        <div class="drawer">
          <p>商品类型</p>
          <el-select class="ks-select" @change="addEventChang" v-model="filterDimension[0].businessType" multiple placeholder="请选择业务类型">
            <el-option
                v-for="item in businessType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>
        <div class="drawer">
          <p>新老用户</p>
          <el-select class="ks-select" @change="addEventChang" v-model="filterDimension[2].isNewVip" multiple placeholder="请选择新老用户">
            <el-option
                v-for="item in isNewVip"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>
        <div class="drawer">
          <p>会员身份</p>
          <el-select class="ks-select" @change="addEventChang" v-model="filterDimension[1].memberShip" multiple placeholder="请选择会员身份">
            <el-option
                v-for="item in memberShip"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>
        <div class="drawer">
          <p>会员类型</p>
          <el-select class="ks-select" @change="addEventChang" v-model="filterDimension[3].memberShipInter" multiple placeholder="请选择会员类型">
            <el-option
                v-for="item in memberShipInter"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>

import {getBusinessType, getPlatform, getMemberShipInterList} from "@/assets/js/api"

export default {
  name: 'select',
  components: {},
  data () {
    return {
      drawer: false,
      direction: 'rtl',
      directionArr:["会员身份","新老用户","地域"],
      isNewVip:[
        {
          label: "新用户",
          value: "0"
        },
        {
          label: "老用户",
          value: "1"
        }
      ],               //新老用户列表
      businessType:[],           //商品类型列表
      memberShip:[               //会员身份列表
        {
          label: "故事会员",
          value: "0"
        },
        {
          label: "听书会员",
          value: "1"
        },
        {
          label: "体验卡会员",
          value: "2"
        },
        {
          label: "非会员",
          value: "3"
        }
      ],
      memberShipInter: [],              //会员类型权益列表
      province:[],               //下单地区列表
      platformList:[],           //平台列表
      platform: "2",              //平台
      filterDimension:[
        {
          businessType:['4','1','2','3']   //商品类型
        },
        {
          memberShip:['0','1','2']     //会员身份
        },
        {
          isNewVip:['0','1']       //新老用户
        },
        {
          memberShipInter: ['6','1','2','3','4','5']        //会员权益
        }
      ]
    }
  },
  computed: {

  },
  created () {
    // 获取业务类型列表
    getBusinessType()
        .then((res)=>{
          console.log(res)
          this.businessType = res.map((item) => {
            return {
              label: item.businessTypeName,
              value: item.id.toString()
            }
          })
        })

    // 获取会员身份列表
    getPlatform(this.params)
        .then((data)=>{
          console.log(data)
          this.platformList = data.map((item) => {
            return {
              label: item.platform,
              value: item.id.toString()
            }
          })
        })

    // 获取会员权益列表
    getMemberShipInterList(this.params)
        .then((data)=>{
          console.log(data)
          this.memberShipInter = data.map((item) => {
            return {
              label: item.memberShipInterName,
              value: item.id.toString()
            }
          })
        })

    this.$emit("filterDimension",this.filterDimension)
    this.$emit("platform",this.platform)
  },
  mounted () {
  },
  methods: {
    addEventChang(){
      console.log(this.filterDimension)
      this.$emit("filterDimension",this.filterDimension)
      this.$emit("platform",this.platform)
    }
  }
}
</script>
<style lang="scss" scoped>
.direction {
  width:200px;
  height:32px;
  line-height: 32px;
  text-indent: 10px;
  font-size: 14px;
  border:1px solid #DCDFE6;
  color:#606266
}
.drawerCon {
  padding: 20px;
  .drawer {
    padding: 0 20px;
  }
}

</style>
